const component_narrow_image = `
<div :style="styleObject">
    <div style="height: 100%;width: 100%;" @click="setLeftLeftImage">
        <el-image :src="imageObj.image_url_real" fit="cover">
            <div slot="error" class="image-slot"></div>
        </el-image>
    </div>
    <!-- 图片选择区 -->
    <el-dialog title="选择广告图片" top="25vh" :visible.sync="dialogVisible" width="25%" :modal-append-to-body="false">
        <el-form :model="imageObj" label-position="left" label-width="150px">
            <el-form-item label="图片跳转地址">
                <el-input v-model="imageObj.url"></el-input>
            </el-form-item>
            <el-form-item label="上传图片">
                <el-upload style="height:60px;"  :headers="uploadHeader" class="border-editable" action="/admin/upload/upload" :on-success="uploadLeftLeftSuccess" :multiple="false" :show-file-list="false">
                    <el-image v-if="imageObj.image_url_real" :src="imageObj.image_url_real" fit="contain" style="height:100%;" >
                        <div slot="error" class="image-slot"></div>
                    </el-image>
                    <i v-else class="el-icon-plus" style="font-size:40px;font-weight:100;padding:10px 30px;"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSetImage" size="small">确 定</el-button>
        </span>
    </el-dialog>
</div>
`

Vue.component('narrow-image', {
    props: {
        image: { type: Object, required: true },
        styleObject: {
            type: Object,
            default: () => {
                return {
                    width: '206px',
                    height: '500px',
                }
            },
        },
    },
    data: function () {
        return {
            dialogVisible: false,
            imageObj: { url: '', image: '', image_url_real: '' },
            uploadHeader: { Accept: 'application/json' },
        }
    },
    methods: {
        setLeftLeftImage() {
            this.dialogVisible = true
        },
        // 图片上传成功
        uploadLeftLeftSuccess(response, file, fileList) {
            if (response.code == 10067) {
                const imageUrl = ns.img(response.data.pic_path)
                this.imageObj.image = response.data.pic_path
                this.imageObj.image_url_real = imageUrl
            }
        },
        handleSetImage() {
            const { url, image } = this.imageObj
            this.$emit('change', { url, image })
            this.dialogVisible = false
        },
    },
    watch: {
        image: function (curr) {
            const image_url_real = curr && curr.image ? ns.img(curr.image) : ''
            const { image, url } = curr
            this.imageObj = { image, url, image_url_real }
        },
    },
    template: component_narrow_image,
})
